<template>
    <div class="rmpp">
        <div class="wrapper">
            <div class="top">
                <p class="tit">热门品牌<span>国际经典</span><span>品质保证</span></p>
                <div class="jt">
                    <!-- <i class="el-icon-arrow-left"></i>
                    <i class="el-icon-arrow-right"></i> -->
                </div>
            </div>
                <el-carousel height="300px" interval=800000000 indicator-position="none">
                    <el-carousel-item>
                        <ul class="list">
                            <li v-for="item in imgBrands.slice(0,5)" :key="item.id">
                                <img :src="item.picture" alt="">
                            </li>
                        </ul>
                    </el-carousel-item>
                    <el-carousel-item>
                        <ul class="list">
                            <li v-for="item in imgBrands.slice(5,10)" :key="item.id">
                                <img :src="item.picture" alt="">
                            </li>
                        </ul>
                    </el-carousel-item>
                </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    name:"HomeBrands",
    data(){
        return {
            imgBrands:[]
        }
    },
    async created(){
        const res=await this.$http.rmBrands();
        // console.log(res);
        this.imgBrands=res.data.result;
    }
}
</script>

<style lang="less" scoped>
.rmpp{
    width:100%;
    background:#f5f5f5;
    padding-bottom:40px;
    .wrapper{
        padding:0 250px;
        .top{
            height:80px;
            line-height:40px;
            display:flex;
            justify-content: space-between;
            .tit{
                font-size:30px;
                span{
                    font-size:14px;
                    color:#666;
                    margin-left:6px;
                }
            }
            .jt{
                color:#666;
                margin-top:30px;
                i{
                    width:30px;
                    height:30px;
                    text-align:center;
                    line-height:30px;
                    background:#eee;
                    margin-right:10px;
                }
            }
        }
        .list{
            list-style:none;
            display:flex;
            justify-content: space-between;
            width:100%;
            margin-left:-40px;
            li{
                width:22%;
                img{
                    width:100%;
                    height:300px;
                }
            }
        }
    }
}
</style>